<template>
  <div class="h-full flex p-4">
    <div class="flex flex-col pr-4 w-1/2">
      <div class="flex-1">
        <BasicTable @register="registerTable" />
      </div>
      <div class="h-4"></div>
      <div class="flex-1">
        <BasicTable @register="registerTable" />
      </div>
    </div>
    <div class="flex-1 flex flex-col w-1/2 h-full">
      <div class="h-1/3 mb-4">
        <BasicTable @register="registerTable" />
      </div>
      <div class="h-1/3 mb-4">
        <BasicTable @register="registerTable2" />
      </div>
      <div class="h-1/3">
        <BasicTable @register="registerTable1" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table'
import { getBasicColumns, getFormConfig } from './tableData'

import { demoListApi } from '@/api/demo/table'

const [registerTable] = useTable({
  api: demoListApi,
  columns: getBasicColumns(),
  useSearchForm: false,
  formConfig: getFormConfig(),
  showTableSetting: false,
  tableSetting: { fullScreen: true },
  showIndexColumn: false,
  isCanResizeParent: true,
  rowKey: 'id'
})

const [registerTable1] = useTable({
  api: demoListApi,
  columns: getBasicColumns(),
  formConfig: getFormConfig(),
  showTableSetting: false,
  tableSetting: { fullScreen: true },
  showIndexColumn: false,
  isCanResizeParent: true,
  useSearchForm: false,
  rowKey: 'id'
})

const [registerTable2] = useTable({
  api: demoListApi,
  columns: getBasicColumns(),
  formConfig: getFormConfig(),
  showTableSetting: false,
  tableSetting: { fullScreen: true },
  showIndexColumn: false,
  isCanResizeParent: true,
  useSearchForm: false,
  pagination: false,
  rowKey: 'id'
})
</script>
